<template>
	<view class="section">
		<view :style="{ height: navBarHeight + 'px', background: '#fff' }"></view>
		<view class="section-box">
			<view class="section-title">
				<image
					class="section-img"
					src="/static/sai.png"
					mode="scaleToFill"
				/>
			</view>
			<view>
				<uni-swiper-dot class="uni-swiper-dot-box" :info="info" :current="current" :mode="mode"
					:dots-styles="dotsStyles" field="content">
					<swiper class="swiper-box" @change="change" :current="swiperDotIndex" >
						<swiper-item v-for="(item, index) in info" :key="index" @click="clickItem(item)">
							<view class="swiper-item">
								<view class="swiper-item-img"  :class="getStatus(item.startTime, item.endTime) == '已结束' ? 'swiper-item-gray' : ''">
									<image
										:src="item.coverUrl"
										mode="scaleToFill"
										style="width: 100%;height: inherit;"
									/>
									<!-- <text class="activity-title">{{item.activityTitle || ''}}</text> -->
									<text class="activity-time">· {{ getStatus(item.startTime, item.endTime) || item.activityStatus }}</text>
								</view>
								<view class="swiper-item-title">
									<view class="title">{{item.activityTitle || ''}}</view>
									<view>
										<text class="subs">时间</text>{{ item.startTime }}～{{ item.endTime }}
									</view>
									<view>
										<text class="subs">地点</text>{{ item.location || ''}}
									</view>
									<view class="flex flex-between">
										<text><text class="subs">大奖</text>{{ item.bigPrize }}</text>
										<text class="gray">{{ item.joinUserQty || 0 }}人参与</text>
									</view>
								</view>
								
							</view>
						</swiper-item>
						
					</swiper>
					
				</uni-swiper-dot>
			</view>
		</view>

		<view class="section-box">
			<view class="section-title">
				<image
					class="section-img"
					src="/static/chou.png"
					mode="scaleToFill"
				/>
				<view class="index-context-name">
					<view class="scroll-wrapper">
						<view class="scroll-content" :style="{ transform: `translateY(-${currentIndex * 40}rpx)`, transition: 'transform 0.5s' }">
							<view class="scroll-item" v-for="(item, index) in userList" :key="index">
								<image
									:src="item.avatarUrl"
									mode="scaleToFill"
									class="content-img"
								/>
								{{ item.nickName }} {{item.timeAgo}}获得{{ item.prizeName }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<uni-swiper-dot class="uni-swiper-dot-box" :info="info2" :current="current2" :mode="mode"
					:dots-styles="dotsStyles" field="content">
					<swiper class="swiper-box" @change="change2" :current="swiperDotIndex2" >
						<swiper-item v-for="(item, index) in info2" :key="index" @click="clickItem(item)">
							<view class="swiper-item">
								<view class="swiper-item-img" :class="getStatus(item.startTime, item.endTime) == '已结束' ? 'swiper-item-gray' : ''">
									<image
										:src="item.coverUrl"
										mode="scaleToFill"
										style="width: 100%;height: inherit;"
									/>
									<!-- <text class="activity-title">{{item.activityTitle}}</text> -->
									<text class="activity-time">· {{ getStatus(item.startTime, item.endTime) || item.activityStatus }}</text>
								</view>
								<view class="swiper-item-title">
									<view class="title"> {{item.activityTitle || ''}} </view>
									<view>
										<text class="subs">时间</text>{{ item.startTime }}～{{ item.endTime }}
									</view>
									<view>
										<text class="subs">类型</text>{{ item.activityType == '1' ? '赛事': '抽奖' }}
									</view>
									<view class="flex flex-between">
										<text>&nbsp;</text>
										<text class="gray">{{ item.joinUserQty || 0 }}人参与</text>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
		</view>
	</view>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { request } from '../utils/request'
const info = ref([])
const info2 = ref([])
const current = ref(0)
const current2 = ref(0)
const mode = ref('default')
const mode2 = ref('default')
const dotsStyles = ref({})
const swiperDotIndex = ref(0) //赛事轮播图下标
const swiperDotIndex2 = ref(0) //抽奖轮播图下标
const page = ref(1)
const page2 = ref(1)
const pageSize = ref(99)
const pageSize2 = ref(99)
const userList = ref([])
const currentIndex = ref(0)
const navBarHeight = ref(0)
let timer = null
const getNavHeight = () => {
	const systemInfo = uni.getSystemInfoSync()
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	// 状态栏高度
	const statusBarHeight = systemInfo.statusBarHeight || 20
	// 胶囊按钮高度
	const capsuleHeight = menuButtonInfo.height || 32
	// 胶囊与状态栏的间距
	const topGap = menuButtonInfo.top - statusBarHeight
	// 整个自定义导航栏高度
	navBarHeight.value = (statusBarHeight + capsuleHeight + topGap * 2) - 44
}
const change = (e) => {
	current.value = e.detail.current
}
const change2 = (e) => {
	current2.value = e.detail.current
}
const clickItem = (e) => {
	if(getStatus(e.startTime, e.endTime) !== '进行中') return;
	uni.navigateTo({ url: `/pages/index/active?url=${encodeURIComponent(e.activityUrl)}` })
}
const getStatus = (starttime, endtime) => {
  // 将 '2025.05.10' 这类字符串转为 Date 对象
  const parseDate = (str) => {
    const [year, month, day] = str.split('.').map(Number);
    return new Date(year, month - 1, day); // JS 中月份从 0 开始
  };

  const start = parseDate(starttime);
  const end = parseDate(endtime);
  const now = new Date();

  if (now < start) {
    return '未开始';
  } else if (now > end) {
    return '已结束';
  } else {
    return '进行中';
  }
}
const initList = async() => {
	await request({
		url: '/activity/list',
		method: 'GET',
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		data: {
			type: 1,
			current: page.value,
			size: pageSize.value
		}
	})
	.then(res => {
		console.log(res)
		if(res.code == 200) {
			const {total, pages, records} = res.data
			// page.value = pages
			
			const list = records.map(item => {
			    //item.startTime = new Date(item.startTime).toISOString().split("T")[0]
				//item.endTime = new Date(item.endTime).toISOString().split("T")[0]
				return item
			})
			info.value = list
		} else {
			uni.showToast({
				title: res.data.message || '获取失败',
				icon: 'none',
				duration: 3000
			})
		}
		
	})
	.catch(err => {
		console.log(err)
	})
}
const initList2 = async() => {
	await request({
		url: '/activity/list',
		method: 'GET',
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		data: {
			type: 2,
			current: page2.value,
			size: pageSize2.value
		}
	})
	.then(res => {
		console.log(res)
		if(res.code == 200) {
			const {total, pages, records} = res.data
			// page.value = pages
			
			const list = records.map(item => {
			    // item.startTime = new Date(item.startTime).toISOString().split("T")[0]
				// item.endTime = new Date(item.endTime).toISOString().split("T")[0]
				return item
			})
			info2.value = list
			getUserList(list[current2.value].id)
		} else {
			uni.showToast({
				title: res.data.message || '获取失败',
				icon: 'none',
				duration: 3000
			})
		}
		
	})
	.catch(err => {
		console.log(err)
	})
}
const getUserList = async(id) => {
	await request({
		url: '/activity/roll/prize',
		method: 'GET',
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		data: {
			id: id
		}
	})
	.then(res => {
		if(res.code == 200) {
			// userList.value = res.data.filter(item => {
			// 	return item.activity_id == 2
			// })
			userList.value = res.data
			if (userList.value.length === 0) return;
			timer = setInterval(() => {
				currentIndex.value = (currentIndex.value + 1) % userList.value.length
			}, 3000)
		} else {
		    uni.showToast({
				title: res.data.message || '获取失败',
				icon: 'none',
				duration: 3000
		    })
		}
	})
}
onMounted(() => {
	getNavHeight()
	initList()
	initList2()
})
onUnmounted(() => {
	clearInterval(timer)
})
</script>
<style scoped>
.title{
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	font-size: 34rpx;
	font-weight: bold;
}
.subs{
	font-size: 28rpx;
	color: #888888;
	margin-right: 10rpx;
}
.gray{
	color: #888888;
}
.section{
	padding: 0 20rpx;
	height: 100vh;
	background-color: #f5f5f5
}
.section-box{
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}
.section-title{
	margin: 20rpx 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.section-img{
    width: 192rpx;
	height: 47rpx;
	margin-bottom: 10rpx;
}

	.swiper-box {
		height: 620rpx;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		/* justify-content: center; */
		/* align-items: center; */
		height: 400rpx;
		color: #333;
		object-fit: cover;
	}
	.swiper-item-img{
		position: relative;
		height: 100%;
    	width: 100%;
		border-radius: 20rpx;
		overflow: hidden;
	}
	/* .swiper-item-gray{
		background-color: rgba(0, 0, 0, .3);
	} */
	 .swiper-item-gray::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5); /* 灰色遮罩层 */
		z-index: 2;
	}
	.activity-title{
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
	}
	.activity-time{
		position: absolute;
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
		right: 20rpx;
		bottom: 20rpx;
		background-color: rgba(0, 0, 0, .3);
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		z-index: 99;
	}
	.swiper-item-img image{
		width: 100%;
		height: 100%;
	}
	.swiper-item-content{
		margin-top: 20rpx;
	}
	.swiper-item-content-title{
		font-size: 30rpx;
	}
	.swiper-item-title{
		position: absolute;
		bottom: 40rpx;
		width: 100%;
		margin: 0 -20rpx;
    	padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.image {
		width: 750rpx;
		border-radius: 8rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.flex-between{
		justify-content: space-between;
		display: flex;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
	.index-context-name{
		font-size: 22rpx;
		color: #888888;
		display: flex;
		align-items: center;
	}
	.scroll-wrapper {
		height: 40rpx;
		overflow: hidden;
	}
	.scroll-content {
		display: flex;
		flex-direction: column;
	}
	.scroll-item {
		display: flex;
		align-items: center;
		height: 40rpx;
		font-size: 24rpx;
		color: #666;
	}
	.content-img{
		height: 22rpx;
		width: 22rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}
</style>